<template>
  <div class="place-wrap">
    <div class="search-box">
      <div class="key-box">
        <img src="./search.png" class="pic1" onclick="return false"/>
        <input class="key" placeholder="请输入搜索关键字" v-model="keywords" maxlength="15"/>
      </div>
      <button type="button" class="search-btn" @click="searchAddress">搜索</button>
    </div>

    <div class="location-box" v-if="showData == 1">
      <div class="location-secrecy" @click="circlePage('保密')">
        <span class="secrecy">保密</span>
      </div>
      <div class="location-item" v-for="(item,index) in placeList" :key="index" @click="circlePage(item.name)">
        <span class="name">{{item.name}}</span>
        <span class="address">{{item.address}}</span>
      </div>
    </div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="../empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        keywords: "",
        placeList: [],
        showData: 0,
        circle: "",
        month: "",
        wage: "",
        prizeId: "",
        mechanismName: "",
        circleTitle: this.$route.query.circleTitle
      }
    },
    created() {
      this.circle = this.$route.query.circle;
      this.month = this.$route.query.month;
      this.wage = this.$route.query.wage;
      this.prizeId = this.$route.query.prizeId;
      this.mechanismName = this.$route.query.mechanismName;
    },
    methods: {
      circlePage(name) {
        this.$router.push({
          path: "/sharecircle",
          query: {
            "month": this.month,
            "wage": this.wage,
            "circle": this.circle,
            "address": name,
            "prizeId": this.prizeId,
            "mechanismName": this.mechanismName,
            "circleTitle": this.circleTitle
          }
        });
      },
      searchAddress() {
        if (this.keywords == '' || this.keywords == undefined) {
          this.$vux.toast.text("请输入搜索关键字", "middle");
          return;
        }

        AMap.plugin('AMap.PlaceSearch', () => {
          let autoOptions = {
            city: '全国'
          };
          let placeSearch = new AMap.PlaceSearch(autoOptions);
          placeSearch.search(this.keywords, (status, result) => {//搜索成功时，result是对应的匹配数据
            if (result.info == 'OK' && result.poiList != null) {
              this.showData = 1;
              this.placeList = result.poiList.pois;
            } else {
              this.showData = 2;
            }
          })
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .place-wrap
    wh(100%, 100%)
    background: rgba(245, 245, 245, 1)
    .search-box
      display flex
      align-items: center
      wh(100%, 1.2rem)
      background: $color
      .key-box
        display: flex
        align-items: center
        margin-left: 0.32rem
        wh(73.07%, 0.8rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.4rem)
        .pic1
          margin-left: 0.253rem
          margin-right: 0.253rem
          wh(0.533rem, 0.533rem)
        .key
          width: 80%
          height: 0.5rem
          line-height: 0.5rem
          size-color(0.4rem, rgba(204, 204, 204, 1))
      .search-btn
        margin-left: auto
        margin-right: 0.347rem
        size-color(0.4rem, rgba(255, 255, 255, 1))
        background: rgba(60, 175, 255, 1)
        text-align: center
    .location-box
      display: flex
      flex-direction: column
      wh(100%, auto)
      background: #FFF
      .location-secrecy
        display: flex
        align-items: center
        margin-left: 0.32rem
        wh(96.8%, 1.2rem)
        border-bottom: 0.027rem solid rgba(245, 245, 245, 1)
        background: #FFFFFF
        .secrecy
          size-color(0.4rem, rgba(60, 175, 255, 1))
      .location-item
        display: flex
        justify-content: center
        flex-direction: column
        margin-left: 0.32rem
        wh(96.8%, 1.2rem)
        background: #FFFFFF
        border-bottom: 0.027rem solid rgba(245, 245, 245, 1)
        &:last-child
          border-bottom: none
        .name
          padding-bottom: 0.1rem
          size-color(0.4rem, rgba(51, 51, 51, 1))
        .address
          padding-top: 0.1rem
          size-color(0.32rem, rgba(153, 153, 153, 1))
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 1.2rem
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>


